<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script>
	$(function() {
		//查询用户信息
		$("#u_inf").hide();
		$("#logout").hide();
		$("#admin").hide();
		$.get("./fillServlet", {}, function(data) {
			//{uid:1,name:'李四'}
			if (data != null && data.length != 0) {
				$("#reg").hide();
				$("#u_inf").show();
				$("#logout").show();
				$("#u_inf").text("欢迎," + data.username);
				if(data.username == 'admin'){
					$("#admin").show();
					}
			} else {
				$("#reg").show();
			}
		});
	});

</script>

<title>首页</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
	background:  #F5F5F5;
}

#first {
	border: gray 2px solid;
	background: url("./img/header_bg.jpg") no-repeat;
	background-size: 100%;
	height: 120px;
	border-radius: 10px;
}

#p1 {
	color: #D3D3D3;
	font-style: oblique;
	font-size: 40px;
	font-family: "华文琥珀";
	margin-top: 28px;
	margin-left: 40px;
	float: left;
}

#p2 {
	color: black;
	font-size: 25px;
	font-family: "仿宋";
	padding-top: 45px;
	margin-left: 480px;
}

#word {
	width: 80px;
	height: 80px;
}

#xx {
	width: 75px;
	height: 105px;
}

#hr1 {
	margin-top: -20px;
	margin: -5 -200 30 -600;
	border: 0;
	color: gray;
	background-color: gray;
	height: 3px
}

#sec {
	float: left;
	padding-left: 100px;
}

#tt {
	font-size: 20px;
	margin: 10px 0 20px 145px;
}

#bg {
	background: #CCCCCC;
	width: 1200px;
	border-radius: 20px;
}

#content div a {
	color: white;
	height: 100px;
	width: 270px;
	text-align: center;
	padding-top: 25px;
	font-size: 30px;
	font-family: "仿宋";
	font-weight: 600;
	background: #B5B5B5;
}

#content {
	margin-top: 20px;
	margin-bottom: 20px;
}

.footer {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 20px;
}

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

a, img {
	border: 0;
	text-decoration: none
}
/* section */
.section {
	width: 1230px;
	margin: auto;
	overflow: hidden;
}

.section ul li {
	float: left;
	margin-right: 40px;
	margin-bottom: 20px;
	display: inline;
	width: 200px;
	height: 180px;
	overflow: hidden;
	position: relative;
}

.section ul li .photo {
	width: 200px;
	height: 180px;
	overflow: hidden;
	border-radius: 5px;
}

.section .rsp {
	width: 200px;
	height: 210px;
	overflow: hidden;
	position: absolute;
	background: black;
	top: 0px;
	left: 0px;
}

.section .text {
	position: absolute;
	width: 200px;
	height: 210px;
	left: -200px;
	top: -20px;
	overflow: hidden;
}

.section .text h3 {
	width: 200px;
	margin-top: 160px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: gray;
	background: #F5F5F5;
	font-family: "微软雅黑";
	font-size: 18px;
}
</style>

</head>
<body>
	<div class="container-fluid">
		<div class="row" id="first"></div>
		<div class="row">
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"
							data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span> <span
								class="icon-bar"></span> <span class="icon-bar"></span> <span
								class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="./index.html">首页</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="./collection.html">我的收藏 <span
									class="sr-only">(current)</span></a></li>
						</ul>
						<form class="navbar-form navbar-right" role="search" action="./searchlist.html">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="关键词搜索"  name="keyword">
								<input name="currentpage" value=0 style="display: none;">
							</div>
							<input type="submit" id="sss" value="搜索"  class="btn btn-default ">
						</form>
						<ul class="nav navbar-nav navbar-right">
							<li><a href="./register.html">注册</a></li>
							<li><a id=u_inf></a></li>
							<li id=reg><a href="./Login.jsp">登录</a></li>
							<li id="admin"><a href="./add.html">添加数据</a></li>
							<li id=logout><a
								href="javascript:location.href='userLogoutServlet';">退出登录</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
		<div class="row">
			<div id="sec">
				<img id="word" src="./img/si1.png"> <img id="word"
					src="./img/shi2.png"> <img id="xx" src="./img/si2.png">
			</div>
			<div id="p1">美食</div>
			<div id="p2">亦为文化，嗣食肆，我们记载文化</div>

		</div>
		<hr id="hr1">
	</div>

	<div id="tt">请选择您想浏览的省份：</div>
	<div class="container" id="bg">
		<br>
		<div class="section">
			<ul class="clearfix">
				<li>
					<div class="photo">
						<img src="./img/prv_bg/beijing.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=1" id="beijing"><h3>北京</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/shanghai.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=2" id="shanghai"><h3>上海</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/tianjing.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=4" id="tianjing"><h3>天津</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/chongqing.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=3" id="chongqing"><h3>重庆</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/hebei.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=5" id="hebei"><h3>河北</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/shanxi.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=6" id="shanxi"><h3>山西</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/liaoling.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=7" id="liaoling"><h3>辽宁</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/jiling.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=8" id="jiling"><h3>吉林</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/heilongjiang.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=9" id="heilongjiang"><h3>黑龙江</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/jiangsu.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=10" id="jiangsu"><h3>江苏</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/zhejiang.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=11" id="zhejiang"><h3>浙江</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/anhui.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=12" id="anhui"><h3>安徽</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/fujian.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=13" id="fujian"><h3>福建</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/jiangxi.png" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=14" id="jiangxi"><h3>江西</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/shandong.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=15" id="shandong"><h3>山东</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/henan.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=16" id="henan"><h3>河南</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/hubei.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=17" id="hubei"><h3>湖北</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/hunan.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=18" id="hunan"><h3>湖南</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/guangdong.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=19" id="guangdong"><h3>广东</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/hainan.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=20" id="hainan"><h3>海南</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/sichuan.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=21" id="sichuan"><h3>四川</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/guizhou.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=22" id="guizhou"><h3>贵州</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/yunnan.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=23" id="yunnan"><h3>云南</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/shanxii.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=24" id="shanxii"><h3>陕西</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/gansu.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=25" id="gansu"><h3>甘肃</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/qinghai.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=26" id="qinghai"><h3>青海</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/neimeng.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=27" id="neimeng"><h3>内蒙古</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/guangxi.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=28" id="guangxi"><h3>广西</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/xizang.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=29" id="xizang"><h3>西藏</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/xingjiang.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=30" id="xingjiang"><h3>新疆</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/ningxia.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=31" id="ningxia"><h3>宁夏</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/xianggang.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=32" id="xianggang"><h3>香港</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/aomen.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=33" id="aomen"><h3>澳门</h3></a>
					</div>
				</li>
				<li>
					<div class="photo">
						<img src="./img/prv_bg/taiwan.jpg" width="200" height="210" />
					</div>
					<div class="rsp"></div>
					<div class="text">
						<a href="./list.html?cityid=34" id="taiwan"><h3>台湾</h3></a>
					</div>
				</li>
				
			</ul>
			<div class="clear">
			</div>
		</div>
	</div>

	<div class="footer">
		<hr>
		Copyright © 2020, <a href="./index.html">&#160&#160嗣食肆&#160</a>&#160All
		Rights Reserved
	</div>

</body>
<script>
	$(function() {
		$(".section ul li .rsp").hide();
		$(".section	 ul li").hover(function() {
			$(this).find(".rsp").stop().fadeTo(500, 0.5)
			$(this).find(".text").stop().animate({
				left : '0'
			}, {
				duration : 500
			})
		}, function() {
			$(this).find(".rsp").stop().fadeTo(500, 0)
			$(this).find(".text").stop().animate({
				left : '318'
			}, {
				duration : "fast"
			})
			$(this).find(".text").animate({
				left : '-318'
			}, {
				duration : 0
			})
		});
	});
</script>
</html>